<template>
    <div class="login-main">
        <h1 style="position: absolute;bottom: 20px;left:33%;color:white;">REGISTER</h1>
        <h1 style="position: absolute;top: 20px;left:37%;color:white;">REGISTER</h1>
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="30" class="demo-ruleForm">
            <el-form-item>
                <el-input v-model="ruleForm.account" type="text" placeholder="账号" style="width:250px;" />
            </el-form-item>
            <el-form-item>
                <el-input v-model="ruleForm.password" type="password" placeholder="密码" style="width:250px;" />
            </el-form-item>
            <el-form-item>
                <el-input v-model="ruleForm.password2" type="password" placeholder="再次输入密码" style="width:250px;" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)"
                    style="position: relative;top:25px;left:25px;">
                    注册
                </el-button>
                <el-button @click="resetForm(ruleFormRef)" style="position: relative;top:25px;left:80px;">清空</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const ruleForm = ref({
    account: '',
    password: '',
    password2: '',
})
import type { FormInstance, FormRules } from 'element-plus'
import axios from 'axios';
import { serverAddress } from '@/config'
const ruleFormRef = ref<FormInstance>()
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            if (ruleForm.value.account !== '' && ruleForm.value.password !== '' && ruleForm.value.password2 !== '') {
                if (ruleForm.value.password !== ruleForm.value.password2) {
                    ElMessage({
                        message: '两次密码不相同',
                        type: 'warning',
                    })
                } else {
                    axios({
                        url: 'https://apifoxmock.com/m2/4743995-0-default/192729941',
                        // url:`${serverAddress}/user/registered`,
                        method: 'POST',
                        data: {
                            userEmail: ruleForm.value.account,
                            userPassword: ruleForm.value.password,
                        }
                    }).then((response) => {
                        if (response.data.code === 1) {
                            ElMessage({
                                message: '注册成功',
                                type: 'success',
                            })
                        } else {
                            ElMessage({
                                message: '注册失败',
                                type: 'warning',
                            })
                        }
                    }).catch((error) => {
                        ElMessage({
                            message: '注册失败',
                            type: 'warning',
                        })
                    })
                }
            } else {
                ElMessage({
                    message: '请填写完整',
                    type: 'warning',
                })
            }
        } else {
            console.log('error submit!')
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    ruleForm.value.account = '',
        ruleForm.value.password = '',
        ruleForm.value.password2 = ''
}
</script>
<style scoped>
.login-main {
    position: absolute;
    width: 100%;
    height: 100%;
}

.demo-ruleForm {
    position: absolute;
    top: 110px;
    left: 40px;
}
</style>